<template>
    <div class="flight-history-container">
    <!-- 模块标题与描述 -->
    <div class="section-header">
      <h2 class="title">历史飞行数据</h2>
      <p class="desc">查看您的飞行历史记录，包括轨迹数据和传感器数据</p>
    </div>

    <!-- 飞行记录卡片 -->
    <el-card class="flight-record-card">
      <div slot="header" class="card-header">
        <span>飞行记录</span>
        <span class="sub-desc">您的所有飞行训练记录</span>
      </div>
      <!-- 无数据提示，可根据实际数据展示逻辑切换 -->
      <div v-if="flightRecords.length === 0" class="empty-tip">
        暂无飞行记录
      </div>
      <!-- 有数据时的列表展示，这里简单示例，可根据真实数据结构扩展 -->
      <el-table
        v-else
        :data="flightRecords"
        border
        style="width: 100%"
      >
        <el-table-column
          prop="id"
          label="记录ID"
          width="120"
        />
        <el-table-column
          prop="scene"
          label="飞行场景"
        />
        <el-table-column
          prop="time"
          label="飞行时长"
          width="150"
        />
        <el-table-column
          prop="date"
          label="飞行日期"
          width="180"
        />
      </el-table>
    </el-card>
  </div>

</template>

<script>
export default {
  name: 'FlightHistory',
  data() {
    return {
      // 模拟飞行记录数据，实际可从接口获取
      //flightRecords: [] 
      // 若有数据，格式示例：
       flightRecords: [
        { id: 1, scene: '森林巡检', time: '25 分钟', date: '2025-08-20' },
         { id: 2, scene: '海域救援', time: '32 分钟', date: '2025-08-19' }
       ]
    }
  }
}
</script>

<style scoped>
.flight-history-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.section-header {
  margin-bottom: 20px;
}

.title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
}

.desc {
  font-size: 14px;
  color: #999;
}

.flight-record-card {
  --el-card-padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.sub-desc {
  font-size: 12px;
  color: #999;
}

.empty-tip {
  text-align: center;
  padding: 30px 0;
  color: #999;
}
</style>